<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href = "../css/bootstrap.min.css">
    <title>文本颜色</title>
    <style>
        .center-block {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

    </style>
</head>
<body>
    <div class="container">
        <!--文字颜色-->
        <p class="text-muted">text-muted</p>
        <p class="text-primary">text-primary</p>
        <p class="text-success">text-success</p>
        <p class="text-info">text-info</p>
        <p class="text-warning">text-warning</p>
        <p class="text-danger">text-danger</p>
        <!--  文字背景色  -->
        <p class="bg-primary">bg-primary</p>
        <p class="bg-success">bg-success</p>
        <p class="bg-info">bg-info</p>
        <p class="bg-warning">bg-warning</p>
        <p class="bg-danger">bg-danger</p>
        <!--    关闭按钮    -->
        <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <!--   三角符号     -->
        <span class="caret"></span>
        <br>
        <!--   float-left/float-right     -->
        <div class="pull-left">
            afdsafdsafdfdsafaf
        </div>
        <br>
        <div class="pull-right">
            afdsafdsafdfdsafaf
        </div>
        <br>
        <!--   清除浮动     -->
        <div class="clearfix">
            afdsafdsafdfdsafaf
        </div>
        <!--   展示隐藏     -->
        <div class="hidden">
            hidden
        </div>
        <div class="show">
            show
        </div>
        <!--    背景图替换文字    -->
        <h1 class="text-hide">Custom heading</h1>
    </div>
</body>
</html>